<template>
  <div class="proportion">
    <p class="title">区域使用占比 >></p>
    <div id="ring"></div>
  </div>
</template>
<script>
  export default {
    name: 'proportion',
    data() {
      return {
        ringOption:{
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: [],
            color:'#fff'
          },
          color:['#53d8d4','#35abff','#ffcd01','#1bbbb5','#808bc6'],
          series: [
            {
              name: '区域占比',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['55%', '55%'],
              itemStyle: {
                normal: {
                  labelLine: {
                    length: 5
                  }
                }
              },
              label: {
                normal: {
                  formatter: '{b}\n{d}%',
                  // backgroundColor: '#eee',
                  // borderColor: '#aaa',
                  textStyle:{
                    color: '#21c5dc',
                    // fontSize: 20
                  },
                }
              },
              data: [
                {value: 2485, name: '新华区'},
                {value: 3428, name: '长安区'},
                {value: 2415, name: '桥西区'},
                {value: 4125, name: '裕华区'},
                {value: 1425, name: '鹿泉区'}
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        },
      }
    },
    mounted() {
      let myChartPies = this.$echarts.init(document.getElementById('ring'));
      myChartPies.setOption(this.ringOption);
      window.addEventListener("resize",function(){
          myChartPies.resize();
        });
    },
    methods: {

    }
  }
</script>
<style scoped>
  .title {
    color:#f3f3f3;
    font-size: 1.6rem;
    position: absolute;
    left: 8%;
    top: 4%;
    letter-spacing: 2px;
  }
  #ring {
    height: 86%;
    width: 88%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }


</style>
